<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .msg{display: none;}
    </style>
</head>
<body>
    用户名：<input type="text" id="username"><br>
    密码：<input type="text" id="password"><br>
    <input type="checkbox" id="remeber"><label for="remeber">记住账号密码</label> <input type="button" value="登录" id="btn">
    <div class="msg">不要在公共设备上勾选此项</div>
</body>
<script>

    class RemeberUserMsg{
        constructor(){
            this.un = $("#username");
            this.pw = $("#password");
            this.btn = $("#btn");
            this.rmb = $("#remeber");
            this.msg = $(".msg");

            // 1. 读取历史数据，填充输入框
            this.init();

            // 2. 绑定事件
            this.addEvent();
        }
        init(){
            // 读将来准备存的名字，同时处理默认数据
            let userMsg = localStorage.getItem("userMsg");
            userMsg = userMsg ? JSON.parse(userMsg) : {username:"",password:""};
            // 填充到输入框
            this.un.value = userMsg.username;
            this.pw.value = userMsg.password;
        }
        addEvent(){
            const that = this;
            // 安全提示事件
            this.rmb.onchange = function(){
                if(this.checked){
                    that.msg.style.display = "block";
                }else{
                    that.msg.style.display = "none";
                }
            }
            // 3. 登录时，判断复选框是否选中
            this.btn.onclick = function(){
                if(that.rmb.checked){
                    // 4. 选中，将用户信息存储
                    that.setLocal();
                }
            }
        }
        setLocal(){
            // 提前打包用户数据
            const obj = {
                username:this.un.value,
                password:this.pw.value
            }
            // 5. 将用户数据存储到本地存储（注意数据类型）
            localStorage.setItem("userMsg", JSON.stringify(obj));
        }
    }
    new RemeberUserMsg;


    function $(select){
        return document.querySelector(select);
    }
    function $$(select){
        return document.querySelectorAll(select);
    }
    function log(){
        console.log(...arguments);
    }

</script>
</html>